@import url(./background.css);
@import url(./nav.css);

html,
body {
  font-size: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "arial", "Microsoft Yahei" !important;
  font-weight: 500 !important;
  color: var(--bs-primary) !important;
  width: 100%;
  height: 100%;
  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.045) !important;
}
.pagination {
  --bs-pagination-padding-x: 1rem !important;
}

@media screen and (max-width: 768px) {
  .footer .fs-1 {
    font-size: 1rem !important;
  }

  .mb-base.fs-1 {
    font-size: 1rem !important;
  }
  .mb-base.fs-3 {
    font-size: 1rem !important;
  }
  .mb-base.fs-0 {
    font-size: 0.75rem !important;
  }
  .mb-base-18.fs-3 {
    font-size: 1.125rem !important;
  }

  .border-end-sm-none {
    border-right: 0px var(--bs-border-style) var(--bs-border-color) !important;
  }
  .mb-bg-center {
    background-size: 100% !important;
    background-position: center !important;
  }
}

@media screen and (min-width: 768px) {
  .border-end-sm-none {
    border-right: 1px var(--bs-border-style) var(--bs-border-color) !important;
  }
}

.font-AB {
  font-family: -apple-system, BlinkMacSystemFont, "Arial Black",
    "Microsoft Yahei" !important;
}

a {
  text-decoration: none !important;
  /* color: var(--bs-white) !important; */
}

input::placeholder {
  color: white !important;
  opacity: 0.6 !important;
  font-size: 2rem !important;
  /* 灰色的占位符文本 */
}

input:focus {
  color: white !important;
  border-color: white;
}
/********** 分页 **********/
.page-link {
  border: none !important;
  background: transparent !important;
  color: #333333 !important;
  font-size: 24px !important;
  font-weight: 400 !important;
}
.page-link.active {
  background: #ac272a !important;
  color: #ffffff !important;
}
/********** list 页面 **********/
.bg-gongkai {
  background: url("//qn1.10soo.net/assets24/202410141655117.svg");
}
.sticky-nav .bg-yellow-3.active {
  background-color: var(--bs-red-4) !important;
  color: var(--bs-white);
}
.sticky-nav .bg-yellow-3 {
  color: var(--bs-primary);
}
.sticky-nav .bg-yellow-3 a {
  color: var(--bs-primary);
}
.sticky-nav .bg-yellow-3.active a {
  color: var(--bs-white);
}
/********** transition **********/

.rounded-top-start {
  border-top-left-radius: 100px !important;
}

.tran_1 {
  transition: all 1s;
}

.tran_0_5 {
  transition: all 0.5s;
}
.trans_3 {
  transition: all 0.3s;
}
.tranlateY-100 {
  transform: translateY(-100%);
  transition: all 0.5s;
}

.circle-1_5r {
  height: 1.5rem;
  width: 1.5rem;
}

.circle-1r {
  height: 1rem;
  width: 1rem;
}

.circle-60px {
  height: 60px;
  width: 60px;
}

.object-fit {
  object-fit: cover;
  object-position: center;
}

/* ********** lenis网站柔和滚动 ********** */

html.lenis {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

/* ********** width，height ********** */

.start--20 {
  left: -20% !important;
}

.w-90 {
  width: 90% !important;
}

.w-140 {
  width: 140% !important;
}

.w-59 {
  width: 59%;
}

.w-30 {
  width: 30%;
}

.w-3r {
  width: 3rem;
}

.w-5r {
  width: 5rem;
}

.w-1r {
  width: 1rem;
}
.w-35 {
  width: 35%;
}

.w-2r {
  width: 2rem;
}

.h-1p {
  height: 1px;
}

.h-2p {
  height: 2px;
}

.h-3r {
  height: 3rem;
}

.h-15r {
  height: 15rem;
}

.h-30r {
  height: 30rem;
}
.h-3_35r {
  height: 3.35rem;
}
/* ********** hover ********** */

.hover-primary:hover,
.hover-primary-wrap:hover .hover-primary {
  color: var(--bs-warning) !important;
  border: 2px solid var(--bs-primary) !important;
  background: var(--bs-primary) !important;
  /* transition: all .3s; */
}

.hover-bg-warning-wrap:hover .hover-bg-warning,
.hover-bg-warning:hover {
  background: var(--bs-warning) !important;
  border-color: var(--bs-warning) !important;
}

.hover-bg-white-wrap:hover .hover-bg-white,
.hover-bg-white:hover {
  background: var(--bs-white) !important;
  border-color: var(--bs-white) !important;
}

.hover-bg-danger-wrap:hover .hover-bg-danger,
.hover-bg-danger:hover {
  background: var(--bs-danger) !important;
  border-color: var(--bs-danger) !important;
  transition: all 0.5s;
}

.hover-bg-red-4-wrap:hover .hover-bg-red-4,
.hover-bg-red-4:hover {
  background: var(--bs-red-4) !important;
  border-color: var(--bs-red-4) !important;
  transition: all 0.5s;
}

.hover-bg-warning-2-wrap:hover .hover-bg-warning-2,
.hover-bg-warning-2:hover {
  background: var(--bs-warning);
}

.hover-bg-label:hover {
  background: var(--bs-danger) !important;
  color: var(--bs-white) !important;
}

.hover-bg-primary:hover,
.hover-bg-primary-wrap:hover .hover-bg-primary {
  background: var(--bs-primary) !important;
  transition: all 0.3s;
}

.hover-bg-gray-2:hover,
.hover-bg-gray-2-wrap:hover .hover-bg-gray-2 {
  background: var(--bs-gray-200) !important;
  transition: all 0.3s;
}

.hover-text-primary-wrap.active .hover-text-primary,
.hover-text-primary:hover,
.hover-text-primary-wrap:hover .hover-text-primary {
  color: var(--bs-primary) !important;
  transition: all 0.3s;
}

.hover-text-white:hover,
.hover-text-white-wrap:hover .hover-text-white {
  color: var(--bs-white) !important;
  transition: all 0.3s;
}

.hover-text-warning:hover,
.hover-text-warning-wrap:hover .hover-text-warning {
  color: var(--bs-warning) !important;
  transition: all 0.3s;
}
.hover-text-red-4:hover,
.hover-text-red-4-wrap:hover .hover-text-red-4 {
  color: var(--bs-red-4) !important;
  transition: all 0.3s;
}
.hover-text-red-3:hover,
.hover-text-red-3-wrap:hover .hover-text-red-3 {
  color: var(--bs-red-3) !important;
  transition: all 0.3s;
}

.hover-border-danger:hover,
.hover-border-danger-wrap:hover .hover-border-danger {
  border-color: var(--bs-danger) !important;
  transition: all 0.3s;
}

.hover-text-danger:hover,
.hover-text-danger-wrap:hover .hover-text-danger,
.hover-text-danger-wrap.active .nav-link {
  color: var(--bs-danger) !important;
  transition: all 0.3s;
}

.hover-arrow-right:hover a i {
  transform: translateX(10px);
  transition: all 0.3s;
}
.hover-arrow-right a i {
  transform: translateX(0);
  transition: all 0.3s;
}
.activeBtn {
  color: #fff !important;
  background: #fb0b1c !important;
}
.nav-second a:hover {
  color: var(--bs-danger) !important;
  transition: all 0.3s;
}

.nav-item .nav-second {
  transform-origin: top;
  transform: translateY(20px);
  visibility: hidden;
  opacity: 0;
}

.nav-item:hover .nav-second {
  transform-origin: top;
  transform: translateY(0);
  visibility: visible;
  opacity: 1;
}

.scalex {
  transform: scaleX(0);
  transition: transform 0.5s;
  transform-origin: left;
  height: 2px;
}

.scalex-1 {
  transform: scaleX(0);
  transition: transform 0.5s;
  transform-origin: left;
  height: 1px;
}

.scalex-wrap:hover .scalex,
.scalex:hover.scalex {
  transform: scaleX(1) !important;
  transition: transform 0.5s;
  transform-origin: left;
}

.scalex-wrap.active .scalex {
  transform: scaleX(1) !important;
  transition: transform 0.5s;
  transform-origin: left;
}

.hover-bold:hover {
  font-weight: 700;
}

.hover-bg-transparent:hover {
  background: transparent !important;
  transition: all 0.3s;
}

.hover-underline .underline {
  opacity: 0;
}

.hover-underline:hover .underline {
  opacity: 1;
}

.circle-page-item:hover,
.circle-page-item.active {
  color: var(--bs-primary) !important;
  background: var(--bs-warning) !important;
}

.hover-visible-wrap .hover-visible {
  opacity: 0;
  visibility: hidden;
}

.hover-visible-wrap:hover .hover-visible,
.hover-visible:hover {
  opacity: 1;
  visibility: visible;
}

.flex-item {
  flex: 1 1 0%;
  transition: all 2s;
}

.flex-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.flex-item:hover {
  flex: 2.6 1 0%;
}

.flex-item:hover .mask {
  transition: all 1s;
  opacity: 0;
  visibility: hidden;
}

.flex-item .mask {
  transition: all 1s;
  opacity: 1;
  visibility: visible;
}

.hover-fadeInUp-wrap:hover .hover-fadeInUp {
  transform: translateY(0);
  transition: transform 1s;
}

.hover-fadeInUp-wrap .hover-fadeInUp {
  transform: translateY(100%);
  transition: transform 1s;
}

.hover-fadeInUp {
  transform: translateY(100%);
  transition: transform 1s;
}

/* ********** z-index ********** */

.z-2 {
  z-index: 2;
}

/* ********** 详情页图片样式 **********  */

.view img {
  max-width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
  display: block !important;
}

.product_view img {
  max-width: 100% !important;
  height: auto !important;
}

/********** animate **********/
.hover-scale-wrap .hover-scale {
  transition: transform 0.3s;
}

.hover-scale-wrap:hover .hover-scale {
  transform: scale(1.1);
  transition: transform 0.3s;
}
/********** animate **********/
.rotate {
  -webkit-animation: rotate-around 8s linear infinite;
  animation: rotate-around 8s linear infinite;
}

@keyframes rotate-around {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn);
  }
}

@keyframes scroll {
  to {
    transform: translateX(-50%);
  }
}

.b {
  width: calc(100vw / 3);
  margin-right: 10px;
}

@media screen and (max-width: 768px) {
  .b {
    width: calc(100vw / 2);
    margin-right: 10px;
  }
}

.t {
  animation: scroll 60s infinite linear;
}
.cursor-pointer {
  cursor: pointer !important;
}
/* ********** text-truncate ********** */
.text-truncate-2 {
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.text-truncate-3 {
  -webkit-line-clamp: 3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.text-truncate-4 {
  -webkit-line-clamp: 4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.text-truncate-5 {
  -webkit-line-clamp: 5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.text-truncate-6 {
  -webkit-line-clamp: 6;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/********** 通知公告底部线条hover效果 **********/
.h-1p {
  height: 1px;
}

.hover-lineToRight::after,
.hover-lineToRight::before {
  height: 100%;
  top: 0;
  position: absolute;
  content: "";
  width: 100%;
}

.hover-lineToRight::after {
  background-color: var(--bs-danger);
  left: -100%;
}

.hover-lineToRight::before {
  background: var(--bs-gray-400);
  left: 0;
}

.hover-lineToRight-wrap:hover .hover-lineToRight::before {
  left: 100%;
  transition: left 0.3s;
}

.hover-lineToRight-wrap:hover .hover-lineToRight::after {
  left: 0;
  transition: left 0.3s 0.3s;
}

/********** 移动端二级导航样式修改 **********/

.accordion {
  --bs-accordion-color: var(--bs-white);
  --bs-accordion-bg: var(--bs-danger);
  --bs-accordion-transition: color 0.15s ease-in-out,
    background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
  --bs-accordion-border-color: transparent !important;
  --bs-accordion-border-width: var(--bs-border-width);
  --bs-accordion-border-radius: var(--bs-border-radius);
  --bs-accordion-inner-border-radius: calc(
    var(--bs-border-radius) - (var(--bs-border-width))
  );
  --bs-accordion-btn-padding-x: 1.25rem;
  --bs-accordion-btn-padding-y: 1rem;
  --bs-accordion-btn-color: var(--bs-white);
  --bs-accordion-btn-bg: var(--bs-accordion-bg);
  --bs-accordion-btn-icon: url(//qn1.10soo.net/assets24/20241030100737.svg);
  --bs-accordion-btn-icon-width: 1.25rem;
  --bs-accordion-btn-icon-transform: rotate(-180deg);
  --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
  --bs-accordion-btn-active-icon: url(//qn1.10soo.net/assets24/20241030100737.svg);
  --bs-accordion-btn-focus-border-color: transparent !important;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0 !important;
  --bs-accordion-body-padding-x: 1.25rem;
  --bs-accordion-body-padding-y: 1rem;
  --bs-accordion-active-color: white !important;
  --bs-accordion-active-bg: transparent !important;
}
a {
  color: inherit;
}

/********** Web侧边栏 **********/

.w-2r {
  width: 2rem;
}
.bg-sideF img {
  width: 130px;
}
.bg-sideF .abs {
  opacity: 0;
  visibility: hidden;
}
.bg-sideF .mb-2 .bg-side:hover ~ .abs {
  opacity: 1;
  visibility: visible;
}

.bg-sideF .mb-2:nth-of-type(1) .abs {
  left: -275%;
  top: 10%;
}

.bg-sideF .mb-2:nth-of-type(2) .abs {
  left: -240%;
  top: -20%;
}
.bg-sideF .mb-2:nth-of-type(3) .abs {
  left: -240%;
  top: -20%;
}

.bg-sideF .mb-2:nth-of-type(1) .bg-side {
  background: url(//qn1.10soo.net/assets24/20241030105125.svg);
}
.bg-sideF .mb-2:nth-of-type(2) .bg-side {
  background: url(//qn1.10soo.net/assets24/20241030105153.svg);
}
.bg-sideF .mb-2:nth-of-type(3) .bg-side {
  background: url(//qn1.10soo.net/assets24/20241030105136.svg);
}
.bg-sideF .mb-2:nth-of-type(4) .bg-side {
  background: url(//qn1.10soo.net/assets24/20241030105206.svg);
}
.bg-sideF .mb-2:nth-of-type(1) .bg-side:hover {
  background: url(//qn1.10soo.net/assets24/20241030105121.svg);
}
.bg-sideF .mb-2:nth-of-type(3) .bg-side:hover {
  background: url(//qn1.10soo.net/assets24/20241030105130.svg);
}
.bg-sideF .mb-2:nth-of-type(2) .bg-side:hover {
  background: url(//qn1.10soo.net/assets24/20241030105144.svg);
}
.bg-sideF .mb-2:nth-of-type(4) .bg-side:hover {
  background: url(//qn1.10soo.net/assets24/20241030105200.svg);
}
